<template>
  <el-dialog title="新建板块" :visible.sync="dialogVisible">
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="login-form">
      <el-form-item label="名称" prop="name">
        <el-input type="text" v-model="ruleForm.name" auto-complete="off"/>
      </el-form-item>
      <el-form-item label="PaperID" prop="pid">
        <el-input type="text" v-model="ruleForm.pid" auto-complete="off"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import {SectionService} from '@/service/api'

export default {
  name: 'SectionEdit',
  props: ['visible', 'pid'],
  computed: {
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  data: function () {
    return {
      ruleForm: {
        name: '',
        pid: this.pid
      },
      rules: {
        name: [
          {required: true, message: '请输入名称', trigger: 'change'}
        ],
        pid: [
          {required: true, message: '请输入试卷ID', trigger: 'change'}
        ]
      }
    }
  },
  methods: {
    submitForm: function (formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          return false
        }
        SectionService.create(this.ruleForm.name, this.ruleForm.pid)
          .then(res => {
            if (res) {
              this.dialogVisible = false
              this.$message.success('创建成功')
              this.$emit('listPage')
            }
          })
      })
    }
  }
}
</script>

<style scoped>

</style>
